<template>
  <view>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
		:up="upOption" :top="0" :bottom="110" :topbar="false" :bottombar="true" :fixed="true" :safearea="false"
		:sticky="true" @emptyclick="emptyClick" @topclick="topClick" @onPageScroll="onPageScroll"
		:style="{ height: scrollH + 'rpx' }">
		<view class="navbar">
			<navbar title="点餐" left="home"></navbar>
		</view>
		<view class="banner" id="banner">
			<u-swiper :list="slideshow" height="360rpx" :indicator="true" indicatorMode="dot" :circular="true"
				imgMode="scaleToFill"></u-swiper>
		</view>
		<!-- sticky吸顶悬浮的菜单 (父元素必须是 mescroll, 且mescroll配置:sticky="true") -->
		<view class="sticky-tabs" :style="{ top: navbarHeight + 'rpx' }">
			<u-search class="search-box" placeholder="请输入菜品名称" height="60rpx" margin="0 40rpx" shape="round"
				:showAction="false" searchIconSize="40" :disabled="true" @click="goSearchPage"></u-search>
		</view>
		<view class="goods-wrapper">
      <scroll-view class="left-warp" :scroll-y="true" :scroll-into-view="'tab_' + tabIndex"
                   :style="{ top: stickyHeight + 'rpx',height:categoryHeight+ 'px' }">
        <view class="tab" :class="{ active: i == tabIndex,fixedCate: (tab.category_no=='1111' || tab.category_no=='1112' || tab.category_no=='1113' || tab.category_no=='1115') }" :id="'tab_' + i" v-for="(tab, i) in category"
              :key="i" @click="tabChange(i)">
          <view class="tab-content">
            {{ tab.category_name }}
          </view>
        </view>
      </scroll-view>
      <food-good-list class="good-comp" ref="goodComp" :list="category" v-if="loadGood"></food-good-list>
		</view>
	</mescroll-body>
  <cart class="cart-box" @scrollToMustCate="scrollToMustCate"></cart>
  </view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from "vuex"; //引入mapState, mapGetters
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  import PageApi from "@/api/page"
	import {
		apiGoods,
		apiGetTabs
	} from "@/api/mock.js";

	import {
		pageApi
	} from "../../api/page.js"

	import {
		throttle,
		debounce
	} from "./tools.js";
	import settlement from "../ordering/settlement";
  import authApi from "../../utils/auth";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
        loadGood: false,
        bannerHeight: 0, // banner 的高度
        searchBoxHeight: 0, // 搜索栏的高度
        // cartHeight: 55, // cart 的高度
				pageTest: "hidden",
        cateClick: false,
				// banner: [
				// 	"https://img2.baidu.com/it/u=2149200144,1056919394&fm=253&fmt=auto&app=138&f=PNG?w=600&h=400",
				// 	"https://img1.baidu.com/it/u=1250655071,4194147809&fm=253&fmt=auto&app=138&f=PNG?w=640&h=366",
				// 	"https://img1.baidu.com/it/u=619029162,3630094732&fm=253&fmt=auto&app=138&f=PNG?w=699&h=429",
				// 	"https://img1.baidu.com/it/u=921764836,3121346471&fm=253&fmt=auto&app=138&f=JPG?w=800&h=444",
				// 	"https://img2.baidu.com/it/u=1546776315,2552327322&fm=253&fmt=auto&app=138&f=PNG?w=500&h=200",
				// ],
				goodsHeight: [],
				tabsLeft: [], // tabs异步获取
				downOption: {
					use: false, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					native: false, // 是否使用系统自带的下拉刷新; 默认false; 仅mescroll-body生效 (值为true时,还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
					autoShowLoading: false, // 如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认false
					isLock: false, // 是否锁定下拉刷新,默认false;
					offset: 80, // 在列表顶部,下拉大于80upx,松手即可触发下拉刷新的回调
					inOffsetRate: 1, // 在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
					outOffsetRate: 0.2, // 在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
					bottomOffset: 20, // 当手指touchmove位置在距离body底部20upx范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行
					minAngle: 45, // 向下滑动最少偏移的角度,取值区间  [0,90];默认45度,即向下滑动的角度大于45度则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;
					beforeEndDelay: 0, // 延时结束的时长 (显示加载成功/失败的时长, android小程序设置此项结束下拉会卡顿, 配置后请注意测试)
					bgColor: "#E75A7C", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
					textColor: "#fff", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
					textInOffset: "下拉刷新", // 下拉的距离在offset范围内的提示文本
					textOutOffset: "释放更新", // 下拉的距离大于offset范围的提示文本
					textLoading: "加载中 ...", // 加载中的提示文本
				},
				upOption: {
					use: false, // 是否启用上拉加载; 默认true
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					isLock: false, // 是否锁定上拉加载,默认false;
					isBoth: true, // 上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认true,两者可同时触发;
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 50, // 每页数据的数量
						time: null, // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					},
					noMoreSize: 3, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					offset: 80, // 距底部多远时,触发upCallback(仅mescroll-uni生效, 对于mescroll-body则需在pages.json设置"onReachBottomDistance")
					bgColor: "transparent", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
					textColor: "gray", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
					textLoading: "加载中 ...", // 加载中的提示文本
					textNoMore: "", // 没有更多数据的提示文本
					toTop: {
						// 回到顶部按钮,需配置src才显示
						// src: "https://www.mescroll.com/img/mescroll-totop.png", // 图片路径
            src: "",
						offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000
						duration: 300, // 回到顶部的动画时长,默认300ms (当值为0或300则使用系统自带回到顶部,更流畅; 其他值则通过step模拟,部分机型可能不够流畅,所以非特殊情况不建议修改此项)
						zIndex: 997, // fixed定位z-index值
						left: null, // 到左边的距离, 默认null. 此项有值时,right不生效. (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						right: 20, // 到右边的距离, 默认20 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						bottom: 200, // 到底部的距离, 默认120 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						safearea: true, // bottom的偏移量是否加上底部安全区的距离, 默认false, 需要适配iPhoneX时使用 (具体的界面如果不配置此项,则取mescroll组件props的safearea值)
						width: 72, // 回到顶部图标的宽度, 默认72 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						radius: "50%", // 圆角, 默认"50%" (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
					},
					empty: {
						use: true, // 是否显示空布局
						icon: "https://www.mescroll.com/img/mescroll-empty.png", // 图标路径
						tip: "~ 暂无相关数据 ~", // 提示
						btnText: "去逛逛 >", // 按钮
						fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效 (transform会使fixed失效,最终会降级为absolute)
						top: "100rpx", // fixed定位的top值 (完整的单位值,如 "10%"; "100rpx")
						zIndex: 99, // fixed定位z-index值
					},
					onScroll: true, // 是否监听滚动事件, 默认false, 仅mescroll-uni生效; mescroll-body直接声明onPageScroll (配置为true时,可@scroll="scroll"获取到滚动条位置和方向; 注意监听列表滚动是非常耗性能的,很容易出现卡顿,非特殊情况不要配置此项)
				},
				goods: [], //列表数据
				tabs: [{
						name: "全部",
						type: "xx"
					},
					{
						name: "奶粉",
						type: "xx"
					},
					{
						name: "图书",
						type: "xx"
					},
				],
				tabIndex: 0, // tab下标
			};
		},
		computed: {
			...mapState({
				scrollH: (state) => state.scrollH,
				cartHeight: (state) => state.cartHeight,
				winrate: (state) => state.winrate,
        slideshow: (state) => state.page.slideshow,
        category: (state) => state.page.category
			}),
			...mapGetters({
				navbarHeight: "getNavbarHeight",
				stickyHeight: "getStickyHeight",
			}),
      // 分类的高度
      categoryHeight() {
        // 当前窗口的高度
        // const winInfo = uni.getWindowInfo()
        const winInfo = uni.getSystemInfoSync()
        console.log('=======')
        console.log(winInfo)
        // const bannerHeight = document.getElementById('banner').clientHeight
        // console.log(bannerHeight)

        // const cartHeight = 55
		//#ifdef MP-WEIXIN
        return winInfo.windowHeight - this.searchBoxHeight - this.cartHeight - 7
		//#endif
		//#ifdef MP-ALIPAY
		return winInfo.windowHeight - this.searchBoxHeight - this.cartHeight - 7 - 28
		//#endif
      }
		},
    onShow() {
      //#ifdef MP-ALIPAY
      my.hideBackHome
      //#endif
    },
    async mounted() {
			this.mescroll.scrollTo(0, 0);
      //#ifdef MP-ALIPAY
			this.realBottom = 0;
      //#endif
      //#ifdef MP-WEIXIN
      this.realBottom = 0;
      //#endif
			this.headerHeight = 0;
      //#ifdef MP-ALIPAY
      // banner 的高度
      my.createSelectorQuery().select('.banner').boundingClientRect().exec((ret) => {
        console.log('======banner===============')
        console.log('ret=======',ret);
        if (ret.length>0) {
          let h = Math.floor(ret[0].height)
          this.bannerHeight = h
        }
      })
      // 搜索栏的高度
      my.createSelectorQuery().select('.sticky-tabs').boundingClientRect().exec((ret) => {
        console.log('======sticky-tabs===================')
        console.log('ret=======',ret);
        if (ret.length>0) {
          let h = Math.floor(ret[0].height)
          this.bannerHeight = h
        }
      })
      //#endif


      //#ifdef MP-WEIXIN
      // banner 的高度
      uni.createSelectorQuery().in(this).select(".banner").boundingClientRect(data => {
        console.log('======banner=================')
        console.log(JSON.stringify(data))
        // {"id":"","dataset":{},"left":12,"right":308,"top":12,"bottom":315,"width":296,"height":303}
        this.bannerHeight = data.height
      }).exec()

      // 搜索栏的高度
      uni.createSelectorQuery().in(this).select(".sticky-tabs").boundingClientRect(data => {
        console.log('======sticky-tabs')
        console.log(JSON.stringify(data))
        // {"id":"","dataset":{},"left":12,"right":308,"top":12,"bottom":315,"width":296,"height":303}
        this.searchBoxHeight = data.height
      }).exec()
      //#endif

      // 底部cart的高度


      // 先进行登陆，登陆成功之后，获取首页列表
      // await authApi.authLogin()
      this.reloadPageData()
      // this.$nextTick(async () => {
      //   this.goodsHeight = await this.$refs.goodComp.getRect(this.realBottom);
      //   this.mescroll.scrollTo(this.goodsHeight[0] - 90 / this.winrate, 0);
      // });
      // 监听页面数据进行刷新
      const self = this
      uni.$on('reloadPageData',function(data){
        self.reloadPageData()
      })
		},

		methods: {
      scrollToMustCate() {
        // 滚动到必选产品分类
        console.log(this.category)
        const index = _.findIndex(this.category,item=>{
          return item.category_no == "1115"
        })
        console.log("index========>",index)
        this.mescroll.scrollTo(this.goodsHeight[index+1],0)
      },
			// getRect() {
			// 	const query = uni.createSelectorQuery().in(this).select(".g-list");
			// 	let gPos = 0;
			// 	query
			// 		.boundingClientRect((data) => {
			// 			console.log("1111", data);
			// 			// data.forEach((o, i) => {
			// 			//   if ( i === 0 ) {
			// 			//     gPos = this.realBottom
			// 			//   } else {
			// 			//     gPos += o.height
			// 			//   }
			// 			//   this.goodsHeight.push(gPos)
			// 			// })
			// 		})
			// 		.exec();
			// 	// ".sticky-tabs"
			// },
      // 刷新页面数据
      reloadPageData() {
        const self = this
        PageApi.pageList().then(pageRes=>{
          if(uni.getStorageSync("TABLE_STATUS") === false) return false
          uni.showLoading({
            title: "页面数据准备中"
          })
          this.loadGood = true
          // setTimeout(()=>{
          //   uni.hideLoading()
          // },2000)
          if(pageRes.code == 200){
            self.$store.commit('page/setSlideshow',pageRes.data.slideshow)
            self.$store.commit('page/setCategory',pageRes.data.category)
            self.$store.commit('cart/setCartInfo',pageRes.data.cart_info)
            self.$store.commit('cart/setOrderInfo',pageRes.data.order_info)
          }
		  // console.time()
          this.$nextTick(async () => {
            this.goodsHeight = await this.$refs.goodComp.getRect(this.realBottom);
            this.mescroll.scrollTo(this.goodsHeight[0] - 90 / this.winrate, 0);
			 uni.hideLoading()
			// console.timeEnd()
          });
          return pageRes
        })
      },
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
        console.log(12321312312321)
        // console.log(this.category)
        // this.$nextTick(async () => {
        //   console.log(8888888888)
        //   this.goodsHeight = await this.$refs.goodComp.getRect(this.realBottom);
        //   this.mescroll.scrollTo(this.goodsHeight[0] - 90 / this.winrate, 0);
        //   // }, 3200)
        // });
        return;
				if (this.tabsLeft.length == 0) {
					apiGetTabs()
						.then((res) => {
							this.tabsLeft = res;
							this.mescroll.resetUpScroll(); // 重新触发upCallback
						})
						.catch(() => {
							this.mescroll.endErr();
						});
					return; // 此处return,先获取tabs
				}
				//联网加载数据
				let curTab = this.tabs[this.tabIndex];
				let keyword = curTab.name; // 具体项目中,您可能取的是tab中的type,status等字段
				apiGoods(page.num, page.size, keyword)
					.then((res) => {
						//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
						//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;

						//方法一(推荐): 后台接口有返回列表的总页数 totalPage
						//this.mescroll.endByPage(res.list.length, res.totalPage); //必传参数(当前页的数据个数, 总页数)

						//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
						//this.mescroll.endBySize(res.list.length, res.totalSize); //必传参数(当前页的数据个数, 总数据量)

						//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
						//this.mescroll.endSuccess(res.list.length, res.hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

						//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
						this.mescroll.endSuccess(res.list.length);

						//设置列表数据
						if (page.num == 1) this.goods = []; //如果是第一页需手动制空列表
						this.goods = this.goods.concat(res.list); //追加新数据
						this.$nextTick(async () => {
							// uni.createSelectorQuery().in(this).selectAll(".g-list").boundingClientRect(data => {
							// 	console.log('333', data)
							// }).exec()
							// setTimeout(() => {

							// //#ifdef MP-ALIPAY
							// console.log("支付宝小程序");
							// //支付宝小程序获取子组件
							// this.goodsHeight =
							//     await this.$refs.mescrollRef.$refs.goodComp.getRect(
							//         this.realBottom
							//     );
							// //#endif
							// //#ifndef MP-ALIPAY
							// console.log("非支付宝小程序");
							// this.goodsHeight = await this.$refs.goodComp.getRect(
							//     this.realBottom
							// );
							// //#endif

							this.goodsHeight = await this.$refs.goodComp.getRect(this.realBottom);
							this.mescroll.scrollTo(this.goodsHeight[0] - 90 / this.winrate, 0);
							// }, 3200)
						});
						// setTimeout(() => {
						// 	this.getRect()
						//        console.log('=========>', this.goodsHeight)

						// }, 1000)
					})
					.catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					});
			},
			// 点击空布局按钮的回调
			emptyClick() {
				uni.showToast({
					title: "点击了按钮",
				});
			},
			// 点击回到顶部按钮的回调
			topClick() {
				console.log("点击了回到顶部按钮");
			},
			// mescroll-uni滚动事件 (需在up配置onScroll:true才生效, mescroll-body直接声明onPageScroll)
			scroll() {
				console.log(
					"mescroll元素id: " +
					this.mescroll.viewId +
					" , 滚动内容高度:" +
					this.mescroll.getScrollHeight() +
					", mescroll高度:" +
					this.mescroll.getClientHeight() +
					", 滚动条位置:" +
					this.mescroll.getScrollTop() +
					", 距离底部:" +
					this.mescroll.getScrollBottom() +
					", 是否向上滑:" +
					this.mescroll.isScrollUp
				);
			},
			// 切换菜单
			tabChange(i) {
        this.cateClick = true
				// console.log('>>>>>>>>>>>>>>>>>>>>>', this.tabIndex, i)
				if (this.tabIndex != i) {
					this.tabIndex = i;

          if(this.tabIndex == 0){
            this.mescroll.scrollTo(this.searchBoxHeight+this.bannerHeight, 0);
            const self = this
            setTimeout(()=>{
              self.cateClick = false
            },200)
            // this.$nextTick(()=>{
            //   this.cateClick = false
            // })
            return
          }
					// 	this.goods = []; // 先置空列表,显示加载进度条
					// 	this.mescroll.resetUpScroll(); // 重置列表数据
          // console.log('===========')
          // console.log(this.goodsHeight)
          // console.log('5555555')
					this.mescroll.scrollTo(this.goodsHeight[i+1], 0);
          const self = this
          setTimeout(()=>{
            self.cateClick = false
          },200)
				}
			},
			// 主动触发下拉刷新
			triggerDownScroll() {
				this.mescroll.triggerDownScroll();
			},
			// 滚动到指定位置,传数字 (单位px)
			scrollToY(y) {
				// this.mescroll.scrollTo(y) // 过渡动画时长默认300ms
				this.mescroll.scrollTo(y, 0); // 无过渡动画
			},
			// 滚动到指定view,传view的id
			scrollIntoView(viewId) {
				// this.mescroll.scrollTo(viewId) // 过渡动画时长默认300ms
				this.mescroll.scrollTo(viewId, 0); // 无过渡动画
			},
			goSearchPage() {
				uni.navigateTo({
					url: "/pages/search/search",
					fail: (err) => {
						console.log(err);
					},
				});
			},
		},
		calcHeight() {},
		// mescroll-body的滚动事件是页面的滚动事件
		onPageScroll(e) {
      // console.log('787878')
      if(this.cateClick){
        return false
      }
      // console.log('12312312312312312')
			// console.log(e)
      // console.log(this.mescroll.getScrollBottom())
			let scrollY = e.scrollTop-50;
			if (this.goodsHeight.length > 0) {
				scrollY += this.headerHeight;
				const index = this.goodsHeight.findIndex((height, index) => {
					return scrollY >= this.goodsHeight[index] && scrollY < this.goodsHeight[index + 1];
				});
				this.tabIndex = index > 0 ? index : 0;
			}
		},
	};
</script>

<style lang="scss">
	.tip {
		font-size: 28rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}

	/* 左边 fixed定位*/
	scroll-view ::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}

	.left-warp {
		z-index: 1;
		position: sticky;
		left: 0;
		/* #ifdef H5 || MP-WEIXIN ||  MP-ALIPAY*/
		width: 180rpx;
		/* #endif */
		//height: calc(100vh - 120rpx - 240rpx);
		background-color: #eee;

		.tab {
			.tab-content {
				max-height: 80rpx;
				overflow: hidden;
				text-align: center;
			}

			font-size: 28rpx;
			padding: 28rpx;
      &.fixedCate{
        color: red;
      }
			&.active {
				background-color: #fff;
        color: #f9ae3d;
			}
		}
	}

	.good-comp {
		flex: 1;
	}

	.header {
		z-index: 1000;
		height: 150rpx;
		position: sticky;
		background-color: red;
		width: 750rpx;
		top: var(--window-top);
	}

	.sticky-tabs {
		z-index: 990;
		position: sticky;
		height: 120rpx;
		background-color: #fff;
		display: flex;
	}

	.search-box {
		align-self: center;
	}

	.banner {
		height: 360rpx;
	}

	.goods-wrapper {
		display: flex;
		flex-direction: row;
	}

	.navbar {
		height: 100%;
	}
</style>
